<template>
    <div class="app-container calendar-list-container" v-loading="loading" element-loading-text="正在导出数据">
    <!-- filter 条件查询 -->
    <div class="btn-add">
        <el-button
        icon="el-icon-circle-plus-outline"
        type="button"
        class="el-button el-button--primary"
        @click="addInOrOut"
        >
            新增</el-button
        >
    </div>

    <!-- 新增数据弹窗 -->
    <el-dialog
      title="新增"
      :visible.sync="showAdd"
      @close="showAdd = false"
      width="45%"
    >
        <el-form :model="createForm" :inline="true" ref="createForm" :rules="addRules">
            <div style="display: flex;">
                <el-form-item label="工作中心" prop="workCenter" label-width="90px">
                    <el-select 
                         v-model="createForm.workCenter"   
                         filterable
                         clearable 
                         style="width: 150px;"
                         placeholder="选择工作中心"
                         @change="changeWorkCenter($event,1)"
                         @focus="focusWorkCenter"
                         class="ul-item">
                         <el-option v-for="item in workCenterList2" :key="item" :value="item" :label="item"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="问题大类" prop="issueLarge" label-width="90px">
                    <el-select 
                         v-model="createForm.issueLarge"   
                         filterable
                         clearable 
                         style="width: 150px;"
                         placeholder="选择问题大类"
                         @focus="focusissueLarge($event,1)"
                         @change="changeissueLarge($event,1)"
                         class="ul-item">
                         <el-option v-for="item in issueLargeList2" :key="item" :value="item" :label="item"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="问题小类" prop="issueLittle" label-width="90px">
                    <el-select 
                         v-model="createForm.issueLittle"   
                         filterable
                         clearable 
                         style="width: 150px;"
                         placeholder="选择问题小类"
                         @focus="focusissueLittle($event,1)"
                         @change="changeissueLittle($event,1)"
                         class="ul-item">
                         <el-option v-for="item in issueLittleList2" :key="item" :value="item" :label="item"/>
                    </el-select>
                </el-form-item>
            </div>
            <div style="display: flex;">
                <el-form-item label="缺陷代码" prop="issueId" label-width="90px">
                    <el-input v-model="createForm.issueId" disabled autosize  clearable style="width: 150px;"/>
                </el-form-item>
                <el-form-item label="问题性质" prop="natureName" label-width="90px">
                    <el-input v-model="createForm.natureName" disabled autosize  clearable style="width: 150px;"/>
                </el-form-item>
                <el-form-item label="责任环节" prop="issueResponsibility" label-width="90px">
                    <el-select 
                         v-model="createForm.issueResponsibility"   
                         filterable
                         clearable 
                         style="width: 150px;"
                         placeholder="选择责任环节"
                         @focus="focusBility($event,1)"
                         @change="changeBility($event,1)"
                         class="ul-item">
                         <el-option v-for="item in issueResponsibilityList" :key="item" :value="item" :label="item"/>
                    </el-select>
                </el-form-item>
            </div>
            <div style="display: flex;">
                <el-form-item label="问题来源" prop="problemSources" label-width="90px">
                    <el-select 
                         v-model="createForm.problemSources"   
                         filterable
                         clearable style="width: 150px;"
                         placeholder="选择问题来源"
                         class="ul-item">
                         <el-option v-for="item in problemList" :key="item" :value="item" :label="item"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间维度" prop="timeDimension" label-width="90px">
                    <el-select 
                         v-model="createForm.timeDimension"   
                         filterable
                         clearable 
                         style="width: 150px;"
                         placeholder="选择时间维度"
                         class="ul-item">
                         <el-option v-for="item in timeList" :key="item" :value="item" :label="item"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="预警类别" prop="warningCategory" label-width="90px">
                    <el-select 
                         v-model="createForm.warningCategory"   
                         filterable
                         clearable 
                         style="width: 150px;"
                         placeholder="选择预警类别"
                         class="ul-item">
                         <el-option v-for="item in earlyList" :key="item" :value="item" :label="item"/>
                    </el-select>
                </el-form-item>
            </div>
            <div style="display: flex;">
                <el-form-item label="数量维度" prop="quantitativeDimension" label-width="90px">
                    <el-input v-model="createForm.quantitativeDimension" type="number" autosize  clearable style="width: 150px;"/>
                </el-form-item>
                <el-form-item label="不良比例" prop="badRatio" label-width="90px">
                    <el-input v-model="createForm.badRatio" autosize  type="number" clearable style="width: 130px;"/> %
                </el-form-item>
                <el-form-item label="编码维度" prop="codingDimension" label-width="90px">
                    <el-select 
                         v-model="createForm.codingDimension"   
                         filterable
                         clearable 
                         style="width: 150px;"
                         placeholder="选择编码维度"
                         class="ul-item">
                         <el-option v-for="item in codingList" :key="item" :value="item" :label="item"/>
                    </el-select>
                </el-form-item>
            </div>
            <el-form-item label="邮件抄送" label-width="90px">
                <div v-for="(items,index1) in MailUserName" :key="index1" style="margin-bottom: 5px;">
                  <el-select  @change="mailChang($event,index1)" filterable @focus="businessFocus" v-model="items.name" placeholder="请选择" style="width:150px">
                    <el-option
                    v-for="(item,index) in personnelList"
                    :key="index"
                    :label="item.userName"
                    :value="item.userName">
                  </el-option>
                </el-select>
                <el-button style="margin-left: 5px;" type="danger" icon="el-icon-delete" circle @click="delMail(index1)"></el-button>
                <el-button v-if="index1 == 0" style="margin-left: 5px;" type="primary" icon="el-icon-plus" circle @click="addMail"></el-button>
              </div>
            </el-form-item>
            <el-form-item label="复线机制" prop="doubleLineMechanism" label-width="150px">
                <el-select 
                     v-model="createForm.doubleLineMechanism"   
                     filterable
                     clearable 
                     style="width: 150px;"
                     placeholder="选择复线机制"
                     class="ul-item">
                     <el-option v-for="item in DoubleLiast" :key="item" :value="item" :label="item"/>
                </el-select>
            </el-form-item>
        </el-form>

        <!-- 公共底部 -->
        <div slot="footer" class="dialog-footer">
            <el-button @click="showAdd = false">取 消</el-button>
            <el-button
            type="primary"
            @click="addfacility('createForm')"
            >新增</el-button
            >
        </div>
    </el-dialog>


    <div class="filter-container">
      <!-- style="width: 150px;margin-right:15px;" -->

        <el-select 
             v-model="param.workCenter"
             filterable
             clearable 
             style="margin-right: 10px;width: 120px;"
             placeholder="工作中心">
             <el-option v-for="item in workCenterList" :key="item" :value="item" :label="item"/>
        </el-select>

        <el-input
            @keyup.enter.native="getData"
            clearable
            style="margin-right: 15px;width: 150px"
            v-model="param.issueLarge"
            placeholder="问题大类"
        ></el-input>

        <el-input
            @keyup.enter.native="getData"
            clearable
            style="margin-right: 15px;width: 150px"
            v-model="param.issueLittle"
            placeholder="问题小类"
        ></el-input>

        <el-input
            @keyup.enter.native="getData"
            clearable
            style="margin-right: 15px;width: 150px"
            v-model="param.issueId"
            placeholder="故障代码"
        ></el-input>

        <el-input
            @keyup.enter.native="getData"
            clearable
            style="margin-right: 15px;width: 150px"
            v-model="param.warningCategory"
            placeholder="预警类别"
        ></el-input>

        <el-date-picker
          v-model="dateOptions"
          type="datetimerange"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>

        <el-button type="primary" v-waves icon="el-icon-search" @click="getData">搜索</el-button>
        <el-button
            type="button"
            v-waves
            class="el-button el-button--warning"
            @click="cancelSubmit"
        >
        重置</el-button>

    </div>

    <!-- table 表格 -->
    <el-table  :data="tableInfo" v-loading="loadingList" element-loading-text="给我一首歌的时间" stripe border fit highlight-current-row style="width: 100%;margin-top:15px;">
      <el-table-column  label="序号" type="index" align="center" width="80px"/>
      <el-table-column label="工作中心"  prop="workCenter" align="center"/>
      <el-table-column label="问题大类"  prop="issueLarge" align="center"/>
      <el-table-column label="问题小类"  prop="issueLittle" align="center"/>
      <el-table-column label="缺陷代码"  prop="issueId" align="center"/>
      <el-table-column label="问题性质"  prop="natureName" align="center"/>
      <el-table-column label="预警类别"  prop="warningCategory" align="center"/>
      <el-table-column label="问题来源"  prop="problemSources" align="center"/>
      <el-table-column label="时间维度"  prop="timeDimension" align="center"/>
      <el-table-column label="数量维度"  prop="quantitativeDimension" align="center"/>
      <el-table-column label="不良比例"  prop="badRatio" align="center"/>
      <el-table-column label="复线机制"  prop="doubleLineMechanism" align="center"/>
      <el-table-column label="邮件抄送"  prop="mailUserName" align="center"/>
      <el-table-column label="维护人"  prop="maintainUserName" align="center"/>
      <el-table-column label="修改时间"  prop="updateTime" align="center"/>
      <el-table-column label="操作" fixed="right" align="center" width="130">
            <template slot-scope="scope" >
                <div class="fx" style="display: flex">
                    <el-button size="mini" type="primary" @click="handleEdit(scope.row)">修改</el-button>
                    <el-button
                        v-if="userInfo.roleId == 14"
                        icon="el-icon-delete"
                        class="el-button el-button--danger"
                        style="font-size: 15px;"
                        @click="handleDelete(scope.row,scope.$index)"
                    ></el-button>
                </div>
            </template>
      </el-table-column>
    </el-table>

    <!-- 修改数据弹窗 -->
    <el-dialog
      title="修改工序信息"
      :visible.sync="showupd"
      @close="showupd = false"
      width="45%"
    >
        <el-form :inline="true" :model="updForm" ref="updForm" :rules="addRules">
            <div style="display: flex;">
                <el-form-item label="工作中心" prop="workCenter" label-width="90px">
                    <el-select 
                         v-model="updForm.workCenter"   
                         filterable
                         clearable 
                         style="width: 150px;"
                         placeholder="选择工作中心"
                         @change="changeWorkCenter($event,2)"
                         @focus="focusWorkCenter"
                         class="ul-item">
                         <el-option v-for="item in workCenterList2" :key="item" :value="item" :label="item"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="问题大类" prop="issueLarge" label-width="90px">
                    <el-select 
                         v-model="updForm.issueLarge"   
                         filterable
                         clearable 
                         style="width: 150px;"
                         placeholder="选择问题大类"
                         @focus="focusissueLarge($event,2)"
                         @change="changeissueLarge($event,2)"
                         class="ul-item">
                         <el-option v-for="item in issueLargeList2" :key="item" :value="item" :label="item"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="问题小类" prop="issueLittle" label-width="90px">
                    <el-select 
                         v-model="updForm.issueLittle"   
                         filterable
                         clearable 
                         style="width: 150px;"
                         placeholder="选择问题小类"
                         @focus="focusissueLittle($event,2)"
                         @change="changeissueLittle($event,2)"
                         class="ul-item">
                         <el-option v-for="item in issueLittleList2" :key="item" :value="item" :label="item"/>
                    </el-select>
                </el-form-item>
            </div>
            <div style="display: flex;">
                <el-form-item label="缺陷代码" prop="issueId" label-width="90px">
                    <el-input v-model="updForm.issueId" disabled autosize  clearable style="width: 150px;"/>
                </el-form-item>
                <el-form-item label="问题性质" prop="natureName" label-width="90px">
                    <el-input v-model="updForm.natureName" disabled autosize  clearable style="width: 150px;"/>
                </el-form-item>
                <el-form-item label="责任环节" prop="issueResponsibility" label-width="90px">
                    <el-select 
                         v-model="updForm.issueResponsibility"   
                         filterable
                         clearable 
                         style="width: 150px;"
                         placeholder="选择责任环节"
                         @focus="focusBility($event,2)"
                         @change="changeBility($event,2)"
                         class="ul-item">
                         <el-option v-for="item in issueResponsibilityList" :key="item" :value="item" :label="item"/>
                    </el-select>
                    <!-- <el-input v-model="updForm.issueResponsibility" @focus="focusBility($event,2)"
                    @change="changeBility($event,2)" disabled autosize  clearable style="width: 150px;"/> -->
                </el-form-item>
            </div>
            <div style="display: flex;">
                <el-form-item label="问题来源" prop="problemSources" label-width="90px">
                    <el-select 
                         v-model="updForm.problemSources"   
                         filterable
                         clearable style="width: 150px;"
                         placeholder="选择问题来源"
                         class="ul-item">
                         <el-option v-for="item in problemList" :key="item" :value="item" :label="item"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间维度" prop="timeDimension" label-width="90px">
                    <el-select 
                         v-model="updForm.timeDimension"   
                         filterable
                         clearable 
                         style="width: 150px;"
                         placeholder="选择时间维度"
                         class="ul-item">
                         <el-option v-for="item in timeList" :key="item" :value="item" :label="item"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="预警类别" prop="warningCategory" label-width="90px">
                    <el-select 
                         v-model="updForm.warningCategory"   
                         filterable
                         clearable 
                         style="width: 150px;"
                         placeholder="选择预警类别"
                         class="ul-item">
                         <el-option v-for="item in earlyList" :key="item" :value="item" :label="item"/>
                    </el-select>
                </el-form-item>
            </div>
            <div style="display: flex;">
                <el-form-item label="数量维度" prop="quantitativeDimension" label-width="90px">
                    <el-input v-model="updForm.quantitativeDimension"  type="number" autosize  clearable style="width: 150px;"/>
                </el-form-item>
                <el-form-item label="不良比例" prop="badRatio" label-width="90px">
                    <el-input v-model="updForm.badRatio" autosize  type="number" clearable style="width: 130px;"/> %
                </el-form-item>
                <el-form-item label="编码维度" prop="codingDimension" label-width="90px">
                    <el-select 
                         v-model="updForm.codingDimension"   
                         filterable
                         clearable 
                         style="width: 150px;"
                         placeholder="选择编码维度"
                         class="ul-item">
                         <el-option v-for="item in codingList" :key="item" :value="item" :label="item"/>
                    </el-select>
                </el-form-item>
            </div>
            <el-form-item label="邮件抄送" label-width="90px">
                <div v-for="(items,index1) in MailUserName" :key="index1" style="margin-bottom: 5px;">
                  <el-select  @change="mailChang($event,index1)" filterable @focus="businessFocus" v-model="items.name" placeholder="请选择" style="width:150px">
                    <el-option
                    v-for="(item,index) in personnelList"
                    :key="index"
                    :label="item.userName"
                    :value="item.userName">
                  </el-option>
                </el-select>
                <el-button style="margin-left: 5px;" type="danger" icon="el-icon-delete" circle @click="delMail(index1)"></el-button>
                <el-button v-if="index1 == 0" style="margin-left: 5px;" type="primary" icon="el-icon-plus" circle @click="addMail"></el-button>
              </div>
            </el-form-item>
            <el-form-item label="复线机制" prop="doubleLineMechanism" label-width="150px">
                <el-select 
                     v-model="updForm.doubleLineMechanism"   
                     filterable
                     clearable 
                     style="width: 150px;"
                     placeholder="选择复线机制"
                     class="ul-item">
                     <el-option v-for="item in DoubleLiast" :key="item" :value="item" :label="item"/>
                </el-select>
                    <!-- <el-input v-model="updForm.doubleLineMechanism" autosize  clearable style="width: 150px;"/> -->
            </el-form-item>
        </el-form>

        <!-- 公共底部 -->
        <div slot="footer" class="dialog-footer">
            <el-button @click="showupd = false">取 消</el-button>
            <el-button
            type="primary"
            @click="updprocess('updForm')"
            >修改</el-button
            >
        </div>
    </el-dialog>

   <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="listQuery.page"
        :page-sizes="[5,10, 20, 30, 40, 100, 300, 500]"
        :page-size="listQuery.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-divider></el-divider>

    <el-button style="margin-right: 10px" type="success" size="small" @click="hExportExcel">导出数据Excel</el-button>

  </div>
</template>

<script>
import { warningFind,warningSave,warningUpd,warningDel } from "@/api/problem"
import { findIssue } from '@/api/problem'
import { findUserListGroup } from '@/api/chargingData'
export default {
    name: 'warningMaintenance',
    data () {
        return {
            listQuery: {
                page: 1,                                    //页码
                limit: 10                                   //每页多少条记录
            },
            param: {
                code: '',                      
                content: ''                    
            },
            total: 0,                                      //数据的总数
            tableInfo: [],
            tableMX:[],
            showMX: false,
            loadingList: false,
            loading: false,
            centerList: [],                         //工作中心列表
            createForm: {
                workCenter:'',
                issueLarge:'',
                issueLittle:'',
                issueId:'',
                natureName:'',
                issueResponsibility:'',
            },
            updForm: {},
            props: { multiple: true },
            // 表单校验
            addRules: {
                workCenter: [
                    { required: true, message: "工作中心不能为空!", trigger: "change" },
                ],
                issueLarge: [
                    { required: true, message: "问题大类不能为空!", trigger: "change" },
                ],
                issueLittle: [
                    { required: true, message: "问题小类不能为空!", trigger: "change" },
                ],
                issueId: [
                    { required: true, message: "缺陷代码不能为空!", trigger: "change" },
                ],
                natureName: [
                    { required: true, message: "问题性质不能为空!", trigger: "change" },
                ],
                issueResponsibility: [
                    { required: true, message: "责任环节不能为空!", trigger: "change" },
                ],
                warningCategory: [
                    { required: true, message: "预警类别不能为空!", trigger: "change" },
                ],
                problemSources: [
                    { required: true, message: "问题来源不能为空!", trigger: "change" },
                ],
                timeDimension: [
                    { required: true, message: "时间维度不能为空!", trigger: "change" },
                ],
                // codingDimension: [
                //     { required: true, message: "编码维度不能为空!", trigger: "change" },
                // ],
                // quantitativeDimension: [
                //     { required: true, message: "数量维度不能为空!", trigger: "change" },
                // ],
                // badRatio: [
                //     { required: true, message: "不良比例不能为空!", trigger: "change" },
                // ],
                doubleLineMechanism: [
                    { required: true, message: "复线机制不能为空!", trigger: "change" },
                ],
            },
            showAdd: false,
            showupd: false,
            userInfo: this.$store.state.user.userInfo,
            barcodeType1List: [],
            accessTypeList: ['出库','入库'],
            barcodeType3List: [],
            dateOptions: this.getNowTime(),
            pickerOptions: {                            // 选择时间范围
              shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit('pick', [start, end]);
                }
              }]    
            },
            earlyList:['质量预警','质量停线','质量停检'],                                     // 预警类别列表
            problemList:['FQC检验','OQC检验','售后问题','市场投诉','外检问题','后工序问题'],    // 问题来源列表
            timeList:['周','月'],                                                           // 时间维度列表
            codingList:['相同编码','不同编码'],                                              // 编码维度列表
            DoubleLiast:['自动复线','质量审核'],
            workCenterList: [],
            issueLargeList: [],
            natureNameList: [],
            sectionNoList: [],
            workCenterList2: [],
            issueLargeList2: [],
            issueLittleList2:[],
            issueResponsibilityList:[],
            checkProblem:[],          // 问题查询所有列表
            MailUserName:[{name:''}],
            personnelList:[],
        }
    },
    computed: {
      inputWid() {
        return function (value) {
            if(!value || (value.length <= 10)){
              return '150px'
            } else {
              return (150 + (String(value).length-10)*6) + 'px'
            }
        }
      }
    },
    methods: {
          // 添加邮箱
      addMail(){
        if(!this.MailUserName[this.MailUserName.length -1].name){
                return this.$message.warning('请先选择人员')
            }
            this.MailUserName.push({name:''})
      },
          // 删除邮箱
      delMail(index){ 
        if(this.MailUserName.length == 1){
          this.MailUserName = [{name:''}]
        } else {
          this.MailUserName.splice(index, 1);
        }
      },
        async businessFocus(){
            console.log(this.personnelList)
        if(!this.personnelList.length) {
          const res = await findUserListGroup({page:1,limit:9999,status: 1})
          this.personnelList = res.data
        }
      },
          // 邮箱发生改变
      mailChang(e,index1){
        this.personnelList.forEach(item => {
          if(e){
            if(e == item.userName){
                console.log(item)  
              if(item.mail && item.mail != 'null'){
                    this.MailUserName[index1].name = item.userName
                    this.MailUserName[index1].mail = item.mail
                    this.MailUserName[index1].jobNumber = item.jobNumber
              } else {
                  this.$message({
                    message: `${e}没有添加邮箱！`,
                    type: 'warning'
                  })    
                  this.MailUserName[index1].name = ''
                  this.MailUserName[index1].mail = ''
                  this.MailUserName[index1].jobNumber = ''
              }
            }
          }
        })
      },
        async changeissueLittle(e,i){
            if(i == 1){
                this.createForm.issueId = ''
                this.createForm.natureName = ''
                this.createForm.issueResponsibility = ''
            }else{
                this.updForm.issueId = ''
                this.updForm.natureName = ''
                this.updForm.issueResponsibility = ''
            }
        },
        // 改变责任环节
        async changeBility(e,i){
            let query = {page: 1, limit: 10000,}
            if(i == 1){
                query.workCenter = this.createForm.workCenter
                query.issueLarge = this.createForm.issueLarge
                query.issueLittle = this.createForm.issueLittle
                query.responsibility = this.createForm.issueResponsibility
                const res = await findIssue(query)
                this.createForm.issueId = res.data.list[0].issueId
                this.createForm.natureName = res.data.list[0].natureName
                this.createForm.issueResponsibility = res.data.list[0].responsibility
            }else{
                query.workCenter = this.updForm.workCenter
                query.issueLarge = this.updForm.issueLarge
                query.issueLittle = this.updForm.issueLittle
                query.responsibility = this.updForm.issueResponsibility
                const res = await findIssue(query)
                this.updForm.issueId = res.data.list[0].issueId
                this.updForm.natureName = res.data.list[0].natureName
                this.updForm.issueResponsibility = res.data.list[0].responsibility
            }
        },
        // 获取责任环节
        async focusBility(e,i){
            let query = {page: 1, limit: 10000,}
            if(i == 1){
                if(!this.createForm.workCenter) return this.$message.error('请选择工作中心！')
                if(!this.createForm.issueLarge) return this.$message.error('请选择问题大类！')
                if(!this.createForm.issueLittle) return this.$message.error('请选择问题小类！')
                query.workCenter = this.createForm.workCenter
                query.issueLarge = this.createForm.issueLarge
                query.issueLittle = this.createForm.issueLittle
            }else{
                if(!this.updForm.workCenter) return this.$message.error('请选择工作中心！')
                if(!this.updForm.issueLarge) return this.$message.error('请选择问题大类！')
                if(!this.updForm.issueLittle) return this.$message.error('请选择问题小类！')
                query.workCenter = this.updForm.workCenter
                query.issueLarge = this.updForm.issueLarge
                query.issueLittle = this.updForm.issueLittle
            }
            const res = await findIssue(query)
            console.log(res)
            const responsibility = res.data.list.map(item => item.responsibility)
            this.issueResponsibilityList = [...new Set(responsibility)]
        },
        // 获取小类
        async focusissueLittle($event,i){
            let query = {page: 1, limit: 10000,}
            if(i == 1){
                if(!this.createForm.workCenter) return this.$message.error('请选择工作中心！')
                if(!this.createForm.issueLarge) return this.$message.error('请选择问题大类！')
                query.workCenter = this.createForm.workCenter
                query.issueLarge = this.createForm.issueLarge
            }else{
                if(!this.updForm.workCenter) return this.$message.error('请选择工作中心！')
                if(!this.updForm.issueLarge) return this.$message.error('请选择问题大类！')
                query.workCenter = this.updForm.workCenter
                query.issueLarge = this.updForm.issueLarge
            }
            const res = await findIssue(query)
            console.log(res)
            const issueLittle = res.data.list.map(item => item.issueLittle)
            this.issueLittleList2 = [...new Set(issueLittle)]
        },

        changeissueLarge(e,i){
            if(i == 1){
                this.createForm.issueLittle = ''
                this.createForm.issueId = ''
                this.createForm.natureName = ''
                this.createForm.issueResponsibility = ''
            }else{
                this.updForm.issueLittle = ''
                this.updForm.issueId = ''
                this.updForm.natureName = ''
                this.createForm.issueResponsibility = ''
            }
        },
        // 获取大类
        async focusissueLarge(e,i){
            let query = {page: 1, limit: 10000,}
            if(i == 1){
                if(!this.createForm.workCenter) return this.$message.error('请选择工作中心！')
                query.workCenter = this.createForm.workCenter
            }else{
                console.log(this.updForm.workCenter)
                if(!this.updForm.workCenter) return this.$message.error('请选择工作中心！')
                query.workCenter = this.updForm.workCenter
            }
            const res = await findIssue(query)
            console.log(res)
            const issueLarge = res.data.list.map(item => item.issueLarge)
            this.issueLargeList2 = [...new Set(issueLarge)] 
        },
        // 新增获得工作中心
        async focusWorkCenter(){
            const res = await findIssue({page: 1, limit: 10000})
            this.checkProblem =  res.data.list
            console.log(res)
            const workCenter = res.data.list.map(item => item.workCenter)
            this.workCenterList2 = [...new Set(workCenter)]
        },
        changeWorkCenter(e,i){
            if(i == 1){
                this.createForm.issueLarge = ''
                this.createForm.issueLittle = ''
                this.createForm.issueId = ''
                this.createForm.natureName = ''
                this.createForm.issueResponsibility = ''
            }else{
                this.updForm.issueLarge = ''
                this.updForm.issueLittle = ''
                this.updForm.issueId = ''
                this.updForm.natureName = ''
                this.updForm.issueResponsibility = ''
            }
        },
            //初始默认执行(重点)，返回日期格式YYYY-MM-DD HH:MM:SS
      getNowTime() {
        let dateTime = +new Date()+8*3600*1000
        const start = new Date(dateTime - 3600 * 1000 * 24 * 7)
            .toISOString()
            .replace('T', ' ')
            .split('.')[0]
            // .substring(0,10) //默认开始时间7天前
        const end = new Date(dateTime)
            .toISOString()
            .replace('T', ' ')
            .split('.')[0]
            // .substring(0,10)//默认结束时间当前时间
        console.log([start, end])
        return [start, end]
        },
        getData(){
          this.listQuery.page = 1
          this.listQuery.limit = 10
          this.handleFilter()
        },
        async handleFilter() {
            this.loadingList = true
            let query = Object.assign({},this.listQuery)
            if(this.param.workCenter){ query.workCenter = this.param.workCenter}
            if(this.param.issueLarge){ query.issueLarge = this.param.issueLarge}
            if(this.param.issueLittle){ query.issueLittle = this.param.issueLittle}
            if(this.param.issueId){ query.issueId = this.param.issueId}
            if(this.param.warningCategory){ query.warningCategory = this.param.warningCategory}
            if(this.dateOptions) {
              if(this.dateOptions.length) {
                  query.startTime = this.dateOptions[0]
                  query.endTime = this.dateOptions[1]
              }
            }
            let data = await warningFind(query)
            let errmsg = data.msg
            this.loadingList = false
            if(data.code == '500') return
            if(data.code != '1') return this.$message.error(errmsg)
            this.total = data.data.count
            this.tableInfo = data.data.list
        },
        // table表单下方的页码组件改变每页显示的数据条数
        handleSizeChange(val) {
          this.listQuery.limit = val
          this.handleFilter()
        },
        // table表单下方的页码组件改变页面
        handleCurrentChange(val) {
          this.listQuery.page = val
          this.handleFilter()
        },
        transformDat(res) {
          const mapInfo = {
            index: '序号',
            workCenter: '工作中心',
            issueLarge: '问题大类',
            issueLittle: '问题小类',
            issueId: '缺陷代码',
            natureName: '问题性质',
            warningCategory: '预警类别',
            problemSources: '问题来源',
            timeDimension: '时间维度',
            quantitativeDimension: '数量维度',
            badRatio: '不良比例',
            doubleLineMechanism: '复线机制',
            mailUserName: '邮件抄送',
            maintainUserName: '维护人',
            updateTime: '修改时间',
          }
          // 对data进行格式化
          // 取出所有的属性名
          const props = Object.keys(res[0]) // ['id','']
          // 将属性名从英文转为中文
          const header = props.map(zhkey => mapInfo[zhkey])
          console.log('中文的表头', header)
          // const data=[['xxxx','总裁办'，'13800000']]
          const data = res.map(obj => Object.values(obj))
          return { header, data }
        },
        handleDelete(row,index) {
            this.$confirm('这将会永久删除该行数据，是否继续?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.delprocess(row,index)
            }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                })
            })
        },
        async delprocess(row,index){
          let res = await warningDel({id: row.id})
          if(res.code == '500') return
          if(res.code != '1') return this.$message.error(res.msg)
          this.tableInfo.splice(index,1)
          this.$message.success(res.msg)
        },
        // 导出excel
        async hExportExcel() {
          this.loading = true
          let query = Object.assign({},this.listQuery)
          query.page = 1
          query.limit = 10000
          if(this.param.workCenter){ query.workCenter = this.param.workCenter}
            if(this.param.issueLarge){ query.issueLarge = this.param.issueLarge}
            if(this.param.issueLittle){ query.issueLittle = this.param.issueLittle}
            if(this.param.issueId){ query.issueId = this.param.issueId}
            if(this.param.warningCategory){ query.warningCategory = this.param.warningCategory}
          if(this.dateOptions) {
              if(this.dateOptions.length) {
                  query.startTime = this.dateOptions[0]
                  query.endTime = this.dateOptions[1]
              }
            }
          let arr = await warningFind(query)
          if(arr.code == '500') return
          if(arr.code != '1'){
            this.loading = false
            return this.$message.error(errmsg)
          }
          if(!arr.data.list.length){
            this.loading = false
            this.$message.error('暂无数据')
          }
          const { header, data } = this.transformDat(this.setSort(arr.data.list))
          import('@/vendor/Export2Excel').then(excel => {
            // excel表示导入的模块对象
            console.log(excel)
            excel.export_json_to_excel({
            header, // 表头 必填
            data, // 具体数据 必填
            filename: '质量预警维护', // 文件名称
            autoWidth: true, // 宽度是否自适应
            bookType: 'xlsx' // 生成的文件类型
            })
          })
          this.loading = false
        },
        // 排序函数
        setSort(arr){
          let newArr = JSON.parse(JSON.stringify(arr))
          let arr1 = []
          newArr.forEach((item,index)=>{
            let obj = {
              index: index+1,
              workCenter: item.workCenter,
              issueLarge: item.issueLarge,
              issueLittle: item.issueLittle,
              issueId: item.issueId,
              natureName: item.natureName,
              warningCategory: item.warningCategory,
              problemSources: item.problemSources,
              timeDimension: item.timeDimension,
              quantitativeDimension: item.quantitativeDimension,
              badRatio: item.badRatio,
              doubleLineMechanism: item.doubleLineMechanism,
              mailUserName: item.mailUserName,
              maintainUserName: item.maintainUserName,
              updateTime: item.updateTime,
            }
            arr1.push(obj)
          })
          return arr1
        },
        cancelSubmit(){
            this.param = {
                code: '',           
                content: '',      
            }
            this.listQuery.page = 1
            this.handleFilter()
        },
        // 提交表单之前先进行验证
        addfacility(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.submitprocess()
                } else {
                    return false
                }
            })
        },
        async submitprocess(){
            if(!this.MailUserName[this.MailUserName.length-1].name) return this.$message.error('邮件抄送最后一个不能为空！')
            if(!this.createForm.quantitativeDimension && !this.createForm.badRatio) return this.$message.error('请选择数量维度或不良比例！')
            if(this.createForm.quantitativeDimension && !this.createForm.codingDimension) return this.$message.error('选择了数量维度必须选择编码维度！')
            let query = Object.assign({},this.createForm)
            let arr1 = []
            let arr2 = []
            let arr3 = []
            this.MailUserName.forEach(item => {
                arr1.push(item.name)
                arr2.push(item.jobNumber)
                arr3.push(item.mail)
            })
            query.mailUserName = arr1.join(',')
            query.mailJobNumber = arr2.join(',')
            query.mail = arr3.join(';')
            const data = await warningSave(query)
            const errMsg = data.msg
            if(data.code == '500') return
            if(data.code != '1') return this.$message.error(errMsg)
            this.$message.success(errMsg)
            this.resetForm()
            this.showAdd = false
            this.handleFilter()
        },
        resetForm(){
             this.$refs.createForm.resetFields();
        },
        handleEdit(row){
            this.updForm = Object.assign({},row)
            let arr1 = []
            let arr2 = []
            let arr3 = []
            if(this.updForm.mailUserName){ arr1 = this.updForm.mailUserName.split(',')}
            if(this.updForm.mailJobNumber){ arr2 = this.updForm.mailJobNumber.split(',')}
            if(this.updForm.mail){ arr3 = this.updForm.mail.split(';')}
            if(this.updForm.mailUserName){
                this.MailUserName = arr1.map((item,index) => ({
                  name: item,
                  jobNumber: arr2[index],
                  mail: arr3[index],
                }))
            }
            console.log(this.MailUserName)
            this.showupd = true
        },
        // 提交表单之前先进行验证
        updprocess(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.warningUpd()
                } else {
                    return false
                }
            })
        },
        async warningUpd(){
            let query = Object.assign({},this.updForm)
            if(!this.MailUserName[this.MailUserName.length-1].name) return this.$message.error('邮件抄送最后一个不能为空！') 
            if(!this.updForm.quantitativeDimension && !this.updForm.badRatio) return this.$message.error('请选择数量维度或不良比例！')
            if(this.updForm.quantitativeDimension && !this.updForm.codingDimension) return this.$message.error('选择了数量维度必须选择编码维度！')
            delete query.createTime
            delete query.updateTime
            let arr1 = []
            let arr2 = []
            let arr3 = []
            this.MailUserName.forEach(item => {
                arr1.push(item.name)
                arr2.push(item.jobNumber)
                arr3.push(item.mail)
            })
            query.mailUserName = arr1.join(',')
            query.mailJobNumber = arr2.join(',')
            query.mail = arr3.join(';')
            const data = await warningUpd(query)
            const errMsg = data.msg
            if(data.code == '500') return
            if(data.code != '1') return this.$message.error(errMsg)
            this.showupd = false
            this.handleFilter()
            this.$message.success(errMsg)
        },
        addInOrOut(){
            this.showAdd = true
        },
        // 获取搜索的下拉框
        async getList(){
            let res = await warningFind({page:1,limit:9999})
            console.log('res',res);
            const workCenter = res.data.list.map(item => item.workCenter)
            const issueLarge = res.data.list.map(item => item.issueLarge)
            const natureName = res.data.list.map(item => item.natureName)
            const sectionNo = res.data.list.map(item => item.sectionNo)
            // 工作中心
            this.workCenterList = [...new Set(workCenter)]
            // 问题大类
            this.issueLargeList = [...new Set(issueLarge)]
            // 问题性质
            this.natureNameList = [...new Set(natureName)]
            // 工段号
            this.sectionNoList = [...new Set(sectionNo)]
        }
    },
    // 进入页面获取table信息
    mounted() {
        this.handleFilter()
        this.getList()
    }
}
</script>

<style>

.btn-add{
    margin-bottom: 28px;
}

.ul-item{
  width: 85%;
}
</style>
